<!--
 * @Author: Bobby
 * @Date: 2021-12-30 10:01:42
 * @LastEditTime: 2022-03-24 11:42:22
 * @LastEditors: Bobby
 * @Description:
 * @FilePath: \wms-v2\src\ve\elements\form\uiDateTimeInput\uiDateTimeInput.vue
 * CIMC-V2
-->
<template>
  <UiFormItem :class="{ hidden: info.extension.hidden.value || conditionProperty.hidden }" :info="info">
    <div class="w-full">
      <el-input
        :ref="info._id"
        v-model.lazy="formDataModel"
        v-ui-ref="vSetRef"
        :class="{ hasPrefix: info.extension.prefixIcon && info.extension.prefixIcon.value }"
        clearable
        :disabled="info.extension.disabled.value || conditionProperty.disabled"
        :maxlength="maxlength"
        :placeholder="translateTitle('Ve.elements.请输入')"
        :size="info.extension.size.value"
        @change="handleChange"
        @input="handleInput"
        @keyup.enter="$handleEnter"
      />
    </div>
  </UiFormItem>
</template>
<script>
  import { translateTitle } from '@/utils/i18n'
  import { defineComponent } from 'vue'
  import { UiMixin, ElementsFormMixin, RefsInjectMixin, ConditionMixin } from '@ve/mixin'
  export default defineComponent({
    name: 'UiDateTimeInput',
    components: {},
    mixins: [UiMixin, ElementsFormMixin, RefsInjectMixin, ConditionMixin],
    data() {
      return {
        oldValue: '',
      }
    },
    computed: {
      moduleType() {
        return this.info.extension.moduleType.value
      },
      maxlength() {
        if (this.moduleType === 'date') {
          return 10
        } else if (this.moduleType === 'time') {
          return 8
        } else {
          return 19
        }
      },
    },
    watch: {},
    created() {},
    methods: {
      translateTitle,
      handleChange(val) {
        // 判断组件类型
        if (this.moduleType === 'date') {
          // 如果数据长度不是10位 则直接清空
          const reg = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/
          if (val.length !== 10 || !reg.test(val)) {
            this.formDataModel = ''
            return
          }
          // this.formDataModel = val.length === 8 ? `${val.substring(0, 4)}-${val.substring(4, 6)}-${val.substring(6)}` : ''
        } else if (this.moduleType === 'time') {
          const reg = /^(20|21|22|23|[0-1]\d):[0-5]\d:[0-5]\d$/
          if (val.length !== 8 || !reg.test(val)) {
            this.formDataModel = ''
            return
          }
          // this.formDataModel = val.length === 6 ? `${val.substring(0, 2)}:${val.substring(2, 4)}:${val.substring(4)}` : ''
        } else if (this.moduleType === 'dateTime') {
          const reg = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])\s+(20|21|22|23|[0-1]\d):[0-5]\d:[0-5]\d$/
          if (val.length !== 19 || !reg.test(val)) {
            this.formDataModel = ''
            return
          }
          // this.formDataModel =
          //   val.length === 14
          //     ? `${val.substring(0, 4)}-${val.substring(4, 6)}-${val.substring(6, 8)} ${val.substring(8, 10)}:${val.substring(
          //         10,
          //         12
          //       )}:${val.substring(12)}`
          //     : ''
        }
        // 更新条件判断的状态
        this.setPageModulesState('value', this.formDataModel)
        // 调用 change 事件
        this.onChange()
      },
      handleInput(val) {
        if (['date', 'dateTime'].indexOf(this.moduleType) > -1 && val.length === 4) {
          if (this.oldValue.length === 5) {
            this.formDataModel = val.slice(0, -1)
          } else {
            this.formDataModel += '-'
          }
        } else if (['date', 'dateTime'].indexOf(this.moduleType) > -1 && val.length === 7) {
          if (this.oldValue.length === 8) {
            this.formDataModel = val.slice(0, -1)
          } else {
            this.formDataModel += '-'
          }
        } else if (this.moduleType === 'dateTime' && val.length === 10) {
          if (this.oldValue.length === 11) {
            this.formDataModel = val.slice(0, -1)
          } else {
            this.formDataModel += ' '
          }
        } else if (this.moduleType === 'dateTime' && val.length === 13) {
          if (this.oldValue.length === 14) {
            this.formDataModel = val.slice(0, -1)
          } else {
            this.formDataModel += ':'
          }
        } else if (this.moduleType === 'dateTime' && val.length === 16) {
          if (this.oldValue.length === 17) {
            this.formDataModel = val.slice(0, -1)
          } else {
            this.formDataModel += ':'
          }
        } else if (this.moduleType === 'time' && val.length === 2) {
          if (this.oldValue.length === 3) {
            this.formDataModel = val.slice(0, -1)
          } else {
            this.formDataModel += ':'
          }
        } else if (this.moduleType === 'time' && val.length === 5) {
          if (this.oldValue.length === 6) {
            this.formDataModel = val.slice(0, -1)
          } else {
            this.formDataModel += ':'
          }
        }
        this.oldValue = this.formDataModel
      },
    },
  })
</script>
<style scoped>
  :deep() .hasPrefix .el-input__inner {
    padding-left: 25px;
  }
</style>
